/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2022-06-24 09:39 周5
 * @Description  : 基本页面
 */
import React, { ReactNode } from 'react'
import { Anchor } from 'antd'
import './index.less'

const { Link } = Anchor

interface AnChorItem {
  title: string
  href: string
  component?: ReactNode
}

export interface AnchorPageProps {
  anchorData?: AnChorItem[]
}

export default function AnchorPage({ anchorData = [] }: AnchorPageProps) {
  return (
    <div className='achor-page'>
      <section className='content'>
        {anchorData.map((item) => (
          <section key={item.title} style={{ marginBottom: 10 }}>
            <div className='title'>{item.title}</div>
            <div>{item?.component}</div>
          </section>
        ))}
      </section>
      <section className='anchor'>
        <Anchor>
          {anchorData.map((item) => (
            <Link key={item.title} href={item.href} title={item.title} />
          ))}
        </Anchor>
      </section>
    </div>
  )
}
